<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM2事件模型</title>
</head>
<body>

  <div id="outer">
    <button id="myClick">点我</button>
  </div>

  <!-- <script>
    var outer = document.getElementById("outer")
    var btn = document.getElementById("myClick")

    outer.addEventListener("click", function() {
      console.log("outer")
    }, true)

    btn.addEventListener("click", function() {
      console.log("inner")
    }, true)
    // 这段代码，我们使用了捕获事件，由于inner是嵌套在outer中的，那么结果就是outer首先执行，其次是inner执行。
  </script> -->

  <!-- <script>
    var outer = document.getElementById("outer")
    var btn = document.getElementById("myClick")

    outer.addEventListener("click", function() {
      console.log("outer")
    }, false)  // outer的执行时机改为冒泡的阶段

    btn.addEventListener("click", function() {
      console.log("inner")
    }, true)
    // 这段代码，outer的执行时机改为冒泡的阶段, 那么结果就是inner首先执行，其次是outer执行。
  </script> -->

  <!-- <script>
    var outer = document.getElementById("outer")
    var btn = document.getElementById("myClick")

    outer.addEventListener("click", function() {
      console.log("outer")
    }, false)

    btn.addEventListener("click", function() {
      console.log("inner")
    }, false)
    // 这段代码，我们使用了冒泡事件，由于inner是嵌套在outer中的，那么结果就是inner首先执行，其次是outer执行。
  </script> -->

  <!-- <script>
    var btn = document.getElementById("myClick")

    btn.addEventListener("click", function() {
      console.log("inner 捕获")
    }, false)

    btn.addEventListener("click", function() {
      console.log("inner 冒泡")
    }, true)
    // 这段代码，把inner注册两个click事件，一个是在捕获阶段，另一个是在冒泡阶段, 但是这种结果是与注册的顺序有关系的，先注册就先执行。
  </script> -->

   <!-- <script>
    var outer = document.getElementById("outer")
    var btn = document.getElementById("myClick")

    outer.addEventListener("click", function() {
      console.log("outer")
    }, false)

    btn.addEventListener("click", function(event) {
      console.log("inner")
      event.stopPropagation(); // 阻止事件冒泡
    }, false)
    // 这段代码，我们在inner阻止了冒泡事件, 不会触发outer的点击事件
  </script> -->

  <script>
    // 该事件模型只在IE中有效，
    var btn = document.getElementById("myClick")

    function handler() {
      console.log("inner")
    }

    btn.attachEvent("onclick", handler) // 绑定事件

    // btn.detachEvent("onclick", handler) // 移除事件
  </script>
</body>
</html>